<!-- src/components/SideMenu.vue -->
<template>
  <div class="side-menu">
    <ul>
      <template v-for="item in menuItems" :key="item.id">
        <li v-if="item.type === 'LINK'">
          <router-link :to="item.url">{{ item.name }}</router-link>
        </li>
        <li v-else-if="item.type === 'FOLDER'" @click="toggleFolder(item)">
          <span>{{ item.name }}</span>
          <ul v-if="item.expanded">
            <li v-for="child in item.children" :key="child.id">
              <router-link :to="child.url">{{ child.name }}</router-link>
            </li>
          </ul>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['menuItems']),
  },
  watch: {
    menuItems: {
      immediate: true,
      handler(newVal) {
        console.log('Menu items updated:', newVal); // 添加日志
      },
    },
  },
  methods: {
    toggleFolder(item) {
      item.expanded = !item.expanded;
    },
  },
};
</script>

<style scoped>
.side-menu {
  width: 250px;
  background-color: #333;
  color: white;
  padding: 20px;
}

.side-menu ul {
  list-style: none;
  padding: 0;
}

.side-menu li {
  margin-bottom: 10px;
}

.side-menu a {
  color: white;
  text-decoration: none;
}

.side-menu a:hover {
  text-decoration: underline;
}

.side-menu ul ul {
  padding-left: 20px;
}
</style>
